<template>
	<div class="all">
		<el-form v-if="data.accessToken">
			<el-form-item label="appid：" class="el_form_item" label-width="100">
				<el-input v-model="data.appId" placeholder="" disabled></el-input>
			</el-form-item>

			<el-form-item label="accessToken：" class="el_form_item" label-width="100">
				<el-input v-model="data.accessToken" placeholder="" disabled></el-input>
			</el-form-item>
		</el-form>
		<el-button v-else type="primary" @click="jump">跳转支付宝授权</el-button>
	</div>
</template>

<script setup lang="ts" name="role">
import { onMounted, reactive, ref, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { NextLoading } from '/@/utils/loading';
import { authAlipayBack, authAlipayUrl, authAlipayToken } from '/@/api/api';
import { useRoute, useRouter } from 'vue-router';

const data = reactive({
	accessToken: '',
	appId: '',
});
const route = useRoute();
onMounted(() => {
	getAuthAlipayToken();
});
const router = useRouter();
function getAuthAlipayToken() {
	authAlipayToken({}).then((res) => {
		Object.assign(data, {
			accessToken: res.data.accessToken,
			appId: res.data.appId,
		});

		if (route.query.app_auth_code && !data.accessToken) {
			authAlipayBack({
				authCode: route.query.app_auth_code,
			}).then((res) => {
				if (res.code == 200) {
					router.go(0);
				}
			});
		}
	});
}

function jump() {
	authAlipayUrl({}).then((res) => {
		// window.open(res.data.url);
		window.location.href = res.data.url;
	});
}
</script>

<style scoped lang="scss">
@import url('/@/theme/page/page.scss');

.all {
	padding: 30px;
	background-color: white;
}

.el_form_item {
	width: 500px;
}
</style>
